<template>
  <div class="app-container" id="supplierafter">
    <div class="cardBox">
      <el-form :inline="true" class="search-form" label-width="100px">
        <el-row style="display: flex">
          <div style="flex: 1">
            <el-form-item label="订单流水号" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入订单流水号"
                v-model="searchForm.order_trade_no"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="支付单号" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入支付单号"
                v-model="searchForm.pay_order_no"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="收货人电话" style="margin: 5px 0">
              <el-input
                clearable
                placeholder="请输入收货人电话"
                v-model="searchForm.addr_phone_number"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="售后状态" style="margin: 5px 0">
              <el-select
                clearable
                v-model="searchForm.status"
                placeholder="请选择售后状态"
              >
                <el-option
                  v-for="item in [
                    { name: '待用户退货', id: 1 },
                    { name: '待确认收货', id: 2 },
                    { name: '待确认发货', id: 3 },
                    { name: '待用户确认收货', id: 4 },
                    { name: '待平台退款', id: 5 },
                    { name: '处理完成', id: 6 },
                  ]"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="供货商商品ID"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入供货商商品ID"
                v-model="searchForm.supplier_goods_id"
                onkeyup="value =value.replace(/[^a-zA-Z0-9]/g, '')"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="商品名称检索"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入商品名称检索"
                v-model="searchForm.supplier_goods_name"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="供货商ID"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入供货商ID"
                v-model="searchForm.supplier_id"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="根据用户昵称"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入根据用户昵称"
                v-model="searchForm.user_nickname"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="用户手机号"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入用户手机号"
                v-model="searchForm.user_mobile"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="收货人姓名"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入收货人姓名"
                v-model="searchForm.addr_recipient"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>

            <el-form-item
              v-if="searchDisplay"
              label="收货地址"
              style="margin: 5px 0"
            >
              <el-input
                clearable
                placeholder="请输入收货地址"
                v-model="searchForm.addr_details"
                type="text"
                min="1"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="申请起始时间"
              style="margin: 5px 0"
            >
              <el-date-picker
                v-model="create_time"
                type="datetimerange"
                @change="create_timeWay"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              v-if="searchDisplay"
              label="支付起始时间"
              style="margin: 5px 0"
            >
              <el-date-picker
                v-model="pay_time"
                type="datetimerange"
                @change="pay_timeWay"
                value-format="yyyy-MM-dd HH:mm:ss"
                :picker-options="pickerOptions"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right"
              >
              </el-date-picker>
            </el-form-item>
          </div>
          <div style="padding: 5px 0">
            <el-form-item>
              <el-button
                size="small"
                type="primary"
                icon="el-icon-search"
                @click="getListWay"
                >查询</el-button
              >
              <el-button
                size="small"
                type="primary"
                icon="el-icon-refresh"
                @click="resetting"
                >重置</el-button
              >
              <el-button
                v-if="!searchDisplay"
                type="warning"
                icon="el-icon-caret-bottom"
                @click="searchDisplay = true"
                >展开</el-button
              >
              <el-button
                v-else
                type="warning"
                icon="el-icon-caret-top"
                @click="searchDisplay = false"
                >收起</el-button
              >
            </el-form-item>
          </div>
        </el-row>
      </el-form>
    </div>
    <div class="grouping cardBox" style="margin-top: 20px">
      <div class="marginBottom">
        <el-row :gutter="20">
          <el-col :span="20"> </el-col>
          <el-col :span="4" style="float: right">
            <div class="right-panel el-button-group">
              <el-button
                class=""
                icon="el-icon-refresh"
                size="mini"
                @click="getListWay"
              ></el-button>
              <el-dropdown trigger="click" :hide-on-click="false">
                <span class="el-dropdown-link">
                  <el-button
                    class=""
                    icon="el-icon-s-operation"
                    size="mini"
                  ></el-button>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item v-for="fruit in allTableThead" :key="fruit">
                    <el-checkbox v-model="checkboxTableThead" :label="fruit">{{
                      tableTheadOptions[fruit].label
                    }}</el-checkbox>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="20">
        <el-col>
          <el-table
            highlight-current-row
            :data="SupplyRefundList"
            :header-cell-style="{
              'background-color': '#f3f8fe',
              color: '#606266',
              height: '50px',
            }"
            style="width: 100%"
            v-loading="loading"
          >
            <el-table-column
              v-for="fruit in tableThead"
              :key="fruit"
              :label="tableTheadOptions[fruit].label"
              min-width="80"
              align="center"
            >
              <template slot-scope="scope">
                <div
                  v-if="fruit == 'supplier_goods_main_image'"
                  style="width: 40px; height: 40px; margin: 0 auto"
                >
                  <el-image
                    v-if="scope.row[fruit]"
                    :src="scope.row[fruit]"
                    :preview-src-list="[scope.row[fruit]]"
                  />
                </div>
                <div v-else-if="fruit == 'type'">
                  <el-tag v-if="scope.row[fruit] == 1" size="mini"
                    >仅退款</el-tag
                  >
                  <el-tag v-if="scope.row[fruit] == 2" size="mini"
                    >退货退款</el-tag
                  >
                  <el-tag v-if="scope.row[fruit] == 3" size="mini">换货</el-tag>
                </div>

                <span v-else>
                  {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                </span>
              </template>
            </el-table-column>
            <!-- <el-table-column align="center" prop="status" label="平台处理状态">
              <template slot-scope="scope">
                <el-tag v-if="scope.row.status == 0" type="warning"
                  >待处理</el-tag
                >
                <el-tag v-if="scope.row.status == 1" type="info">处理中</el-tag>
                <el-tag v-if="scope.row.status == 2" type="success"
                  >处理完成</el-tag
                >
                <el-tag v-if="scope.row.status == 3" type="danger"
                  >审核未通过</el-tag
                >
                <el-tag v-if="scope.row.status == 4" type="danger"
                  >取消申请</el-tag
                >
              </template>
            </el-table-column> -->
            <el-table-column
              align="center"
              fixed="right"
              width="200"
              prop="address"
              label="操作"
            >
              <template slot-scope="scope">
                <el-button v-if="scope.row.status == 1" type="info" size="mini"
                  >待用户退货</el-button
                >
                <el-button v-if="scope.row.status == 5" type="info" size="mini"
                  >待平台退款</el-button
                >
                <el-button v-if="scope.row.status == 4" type="info" size="mini"
                  >待用户确认收货</el-button
                >
                <el-button
                  v-hasPermi="'orderlist/supplierafter/qrjh'"
                  v-if="scope.row.status == 2"
                  type="warning"
                  size="mini"
                  @click="confirmHandle(scope.row)"
                  >确认寄回</el-button
                >
                <el-button
                  v-if="scope.row.status == 6"
                  type="success"
                  size="mini"
                  >处理完成</el-button
                >
              </template>
            </el-table-column>
          </el-table></el-col
        >
      </el-row>
      <el-row style="text-align: right">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="searchForm.page"
          :limit.sync="searchForm.pageSize"
          @pagination="getListWay"
        />
      </el-row>
    </div>
    <!-- 确认收货弹框 -->
    <el-dialog
      title="确认收货"
      :close-on-click-modal="false"
      :visible.sync="confirmDialog"
      width="800px"
      @close="confirmClose"
    >
      <el-row style="position: relative" v-loading="confirmLoading">
        <el-form
          label-width="110px"
          :model="confirmForm"
          :rules="confirmRules"
          ref="confirmForm"
        >
          <el-col :span="22">
            <el-form-item label="收到货物数量" prop="refund_number">
              <el-input
                type="text"
                placeholder="请输入收到货物数量"
                show-word-limit
                clearable
                v-model.trim="confirmForm.refund_number"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="货物图片">
              <logo-upload
                :file-list="imgs"
                :show-file-list="true"
                accept="image/jpeg, image/png"
                @uploadCallback="imgsCallback"
              />
            </el-form-item>
          </el-col>
          <el-col :span="22">
            <el-form-item label="备注">
              <el-input
                type="textarea"
                placeholder="请输入备注"
                maxlength="200"
                show-word-limit
                clearable
                :autosize="{ minRows: 3, maxRows: 6 }"
                v-model.trim="confirmForm.remark"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="confirmDialog = false">取 消</el-button>
        <el-button type="primary" @click="confirmSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getSupplyRefundList, setGoodsBackConfirm } from "@/api/order/index";
import LogoUpload from "@/components/FileUpload";
const tableTheadOption = {
  created_at: {
    label: "申请时间",
    field: "created_at",
  },
  refund_id: {
    label: "售后订单ID",
    field: "refund_id",
  },
  refund_order_no: {
    label: "售后订单编号",
    field: "refund_order_no",
  },
  pay_order_no: {
    label: "支付单号",
    field: "pay_order_no",
  },
  supplier_id: {
    label: "供货商ID",
    field: "supplier_id",
  },
  supplier_name: {
    label: "供货商名称",
    field: "supplier_name",
  },
  supplier_goods_id: {
    label: "商品ID",
    field: "supplier_goods_id",
  },
  supplier_goods_name: {
    label: "商品名称",
    field: "supplier_goods_name",
  },
  supplier_goods_main_image: {
    label: "商品图片",
    field: "supplier_goods_main_image",
  },
  supplier_sku_name: {
    label: "规格名称",
    field: "supplier_sku_name",
  },
  supplier_sku_unit: {
    label: "规格单位",
    field: "supplier_sku_unit",
  },
  supplier_sku_retail_price: {
    label: "规格零售价",
    field: "supplier_sku_retail_price",
  },
  type: {
    label: "售后类别",
    field: "type",
  },
  refund_number: {
    label: "退货数量",
    field: "refund_number",
  },
};
const allTableThead = [
  "created_at",
  "refund_id",
  "refund_order_no",
  "pay_order_no",
  "supplier_id",
  "supplier_name",
  "supplier_goods_id",
  "supplier_goods_name",
  "supplier_goods_main_image",
  "supplier_sku_name",
  "supplier_sku_unit",
  "supplier_sku_retail_price",
  "type",
  "refund_number",
];
const defaultTableThead = [
  "created_at",
  "refund_id",
  "refund_order_no",
  "pay_order_no",
  "supplier_name",
  "supplier_goods_name",
  "supplier_goods_main_image",
  "supplier_sku_name",
  "type",
  "refund_number",
];
export default {
  components: { LogoUpload },
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      );
      this.tableKey = this.tableKey + 1;
    },
  },
  data() {
    return {
      // 默认表头
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      tableKey: 1, // 为了保证table 每次都会重渲
      searchDisplay: false,
      loading: true,
      searchForm: {
        supplier_goods_id: "", // 供货商商品ID检索
        supplier_goods_name: "", // 商品名称检索
        supplier_id: "", // 供货商ID检索
        order_trade_no: "", // 订单流水号检索
        pay_order_no: "", // 根据订单支付单号检索
        user_nickname: "", // 根据用户昵称检索
        user_mobile: "", // 根据用户手机号检索
        addr_recipient: "", // 根据收货人姓名检索
        addr_phone_number: "", // 收货人电话检索
        addr_details: "", // 根据收货地址检索
        status: "", // 售后状态：1=待用户退货；2=待供货商确认收货；3=待供货商确认发货（换货存在此状态）；4=待用户确认收货（换货存在此状态）；5=待平台退款；6=处理完成
        create_time_start: "", // 下单起始时间（例：2023-10-01 12:20）
        create_time_end: "", // 下单截至时间（例：2023-10-02 12:20）
        pay_time_start: "", // 支付起始时间（例：2023-10-01 12:20）
        pay_time_end: "", // 支付成截至时间（例：2023-10-02 12:20）
        page: 1, // 页码（默认1）
        pageSize: 10, // 每页数量（默认10）
      },
      create_time: [],
      pay_time: [],
      SupplyRefundList: [],
      total: 0,
      confirmDialog: false,
      confirmLoading: false,
      confirmForm: {
        refund_id: "",
        refund_number: "",
        remark: "",
        imgs: "",
      },
      imgs: [],
      confirmRules: {
        refund_number: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /\D/g;
              if (value === "") {
                callback(new Error("请输入收到货物数量"));
              } else {
                if (req.test(value)) {
                  callback(new Error("请输入整数"));
                }
                callback();
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.getListWay();
  },
  methods: {
    getListWay() {
      this.loading = true;
      getSupplyRefundList(this.searchForm)
        .then((res) => {
          this.loading = false;
          if (res.code !== 200 || res.status !== 1) {
            this.confirmLoading = false;
            return this.$messages.error(res.msg);
          }
          this.SupplyRefundList = res.data.list;
          this.total = res.data.total;
        })
        .catch((err) => {
          this.loading = false;
          this.$messages.error(err.msg);
        });
    },
    resetting() {
      this.searchForm = {
        supplier_goods_id: "", // 供货商商品ID检索
        supplier_goods_name: "", // 商品名称检索
        supplier_id: "", // 供货商ID检索
        order_trade_no: "", // 订单流水号检索
        pay_order_no: "", // 根据订单支付单号检索
        user_nickname: "", // 根据用户昵称检索
        user_mobile: "", // 根据用户手机号检索
        addr_recipient: "", // 根据收货人姓名检索
        addr_phone_number: "", // 收货人电话检索
        addr_details: "", // 根据收货地址检索
        status: "", // 售后状态：1=待用户退货；2=待供货商确认收货；3=待供货商确认发货（换货存在此状态）；4=待用户确认收货（换货存在此状态）；5=待平台退款；6=处理完成
        create_time_start: "", // 下单起始时间（例：2023-10-01 12:20）
        create_time_end: "", // 下单截至时间（例：2023-10-02 12:20）
        pay_time_start: "", // 支付起始时间（例：2023-10-01 12:20）
        pay_time_end: "", // 支付成截至时间（例：2023-10-02 12:20）
        page: 1, // 页码（默认1）
        pageSize: 10, // 每页数量（默认10）
      };
      this.getListWay();
    },
    create_timeWay(vla) {
      this.searchForm.create_time_start = vla[0];
      this.searchForm.create_time_end = vla[1];
    },
    pay_timeWay(vla) {
      this.searchForm.pay_time_start = vla[0];
      this.searchForm.pay_time_end = vla[1];
    },
    confirmClose() {
      this.confirmForm = {
        refund_id: "",
        refund_number: "",
        remark: "",
        imgs: "",
      };
      this.imgs = [];
    },
    imgsCallback(file) {
      this.imgs = file;
    },
    confirmHandle(row) {
      this.confirmForm.refund_id = row.refund_id;
      this.confirmForm.refund_number = row.refund_number;
      console.log(row);
      this.confirmDialog = true;
    },
    confirmSubmit() {
      this.$refs.confirmForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true;
          var arr = [];
          this.imgs.forEach((item) => {
            arr.push(item.url);
          });
          this.confirmForm.imgs = arr.toString();
          setGoodsBackConfirm(this.confirmForm).then((res) => {
            if (res.code !== 200 || res.status !== 1) {
              this.confirmLoading = false;
              return this.$messages.error(res.msg);
            }
            this.$messages.success(res.msg);
            this.confirmLoading = false;
            this.confirmDialog = false;
            this.getListWay();
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style>
#supplierafter .el-upload--picture-card {
  width: 90px !important;
  height: 90px !important;
  line-height: 90px;
}

#supplierafter .el-upload-list--picture-card .el-upload-list__item-actions {
  width: 90px !important;
  height: 90px !important;
}

#supplierafter .el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 90px !important;
  height: 90px !important;
}

#supplierafter .el-upload-list--picture-card .el-upload-list__item {
  width: 90px !important;
  height: 90px !important;
}
</style>